import Taro, { Component } from '@tarojs/taro'
import { AtIcon } from 'taro-ui'
import classNames from 'classnames'
import PropsType from 'prop-types'
import { View, Text } from '@tarojs/components'
import '../styles/map.scss'

export default class DMap extends Component {

  constructor(props) {
    super(props)
    this.state = {
      map: null
    }
  }

  componentDidMount() {
    this.loadScript().then(map => {
      this.setState({ map })
    })
  }

  //异步加载地图库函数文件
  loadScript() {
    return new Promise((res, rej) => {
      window.__init__ = () => {
        const myLatlng = new qq.maps.LatLng(23.117359, 113.346032);
        const myOptions = {
          zoom: 8,
          center: myLatlng,
          mapTypeId: qq.maps.MapTypeId.ROADMAP
        }
        const map = new qq.maps.Map(document.getElementById("container_map"), myOptions);
        res(map)
      }
      //创建script标签
      var script = document.createElement("script");
      //设置标签的type属性
      script.type = "text/javascript";
      //设置标签的链接地址
      script.src = "https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&callback=__init__";
      //添加标签到dom
      document.body.appendChild(script);
    })
  }

  render() {
    const {
      className
    } = this.props
    return (
      <View className={classNames('b_map', className)}>
        <View id='container_map'></View>
      </View>
    )
  }
}

DMap.defaultProps = {
  className: ''
}

DMap.PropsType = {
  className: PropsType.oneOfType[PropsType.string, PropsType.object]
}